<section class="mb-3 manual" ng-init="getList()">
    <div class="row">
        <div class="col-9">
            <div class="row">
                <div ng-repeat="post in data.items" class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img class="bd-placeholder-img card-img-top" src="{{post.thumbnailUrl}}" />
                        <div class="card-body">
                            <h6 class="small mb-4">{{post.title}}
                                <br />
                                <small class="text-muted">by <b><a href="{{post.properties.author_url}}" target="_blank">{{post.properties.author_name}}</a></b> in <b>{{post.properties.category}}</b></small>
                            </h6>

                            <div class="d-flex justify-content-left">
                                <h5 class="text-success">$ {{post.properties.price }}</h5>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="col-5 p-0">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                            style="width: {{post.properties.avg_rating}}%" aria-valuenow="{{post.properties.avg_rating}}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">{{post.properties.download_count}} download</small>
                                </div>
                                <div class="col-7 justify-content-end text-right p-0">
                                    <a target="_blank" href="{{post.properties.external_preview_url}}" class="btn btn-sm btn-outline-secondary mr-1">Preview</a>
                                    <button type="button" class="btn btn-sm btn-outline-primary"><i
                                            class="fas fa-cloud-download-alt"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img class="bd-placeholder-img card-img-top"
                            src="https://themeforest.img.customer.envatousercontent.com/files/274184998/01_preview.jpg?auto=compress%2Cformat&fit=crop&crop=top&w=590&h=300&s=42793292eb08245b65a4b064bbbfa351" />
                        <div class="card-body">
                            <h6 class="small mb-4">Metronic - Bootstrap 4, Angular 8, React Admin Dashboard Theme...
                                <br />
                                <small class="text-muted">by keenthemes in Admin Templates</small>
                            </h6>

                            <div class="d-flex justify-content-left">
                                <h5 class="">$17</h5>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="col-5 p-0">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-success" role="progressbar"
                                            style="width: 100%" aria-valuenow="100" aria-valuemin="0"
                                            aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">5.6k sales</small>
                                </div>
                                <div class="col-7 justify-content-end text-right p-0">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mr-1">Preview</button>
                                    <button type="button" class="btn btn-sm btn-outline-primary"><i
                                            class="fas fa-cloud-download-alt"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img class="bd-placeholder-img card-img-top"
                            src="https://themeforest.img.customer.envatousercontent.com/files/268283650/01_preview_brook.jpg?auto=compress%2Cformat&fit=crop&crop=top&w=590&h=300&s=6501da8c473a2855f27349d7d4d5b3de" />
                        <div class="card-body">
                            <h6 class="small mb-4">Metronic - Bootstrap 4, Angular 8, React Admin Dashboard Theme...
                                <br />
                                <small class="text-muted">by keenthemes in Admin Templates</small>
                            </h6>

                            <div class="d-flex justify-content-left">
                                <h5 class="text-success">$Free</h5>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="col-5 p-0">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
                                            style="width: 1x5%" aria-valuenow="15" aria-valuemin="0"
                                            aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">5.6k sales</small>
                                </div>
                                <div class="col-7 justify-content-end text-right p-0">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mr-1">Preview</button>
                                    <button type="button" class="btn btn-sm btn-outline-primary"><i
                                            class="fas fa-cloud-download-alt"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img class="bd-placeholder-img card-img-top"
                            src="https://themeforest.img.customer.envatousercontent.com/files/274523882/preview/00_preview.png?auto=compress%2Cformat&fit=crop&crop=top&w=590&h=300&s=3f5beed9d81da46f2292292636e05d37" />
                        <div class="card-body">
                            <h6 class="small mb-4">Metronic - Bootstrap 4, Angular 8, React Admin Dashboard Theme...
                                <br />
                                <small class="text-muted">by keenthemes in Admin Templates</small>
                            </h6>

                            <div class="d-flex justify-content-left">
                                <h5 class="text-success">$Free</h5>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="col-5 p-0">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                            style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">5.6k sales</small>
                                </div>
                                <div class="col-7 justify-content-end text-right p-0">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mr-1">Preview</button>
                                    <button type="button" class="btn btn-sm btn-outline-primary"><i
                                            class="fas fa-cloud-download-alt"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div> -->
            </div>
        </div>
        <div class="col-3">
            <div class="card position-sticky" style="top: 5.5rem; z-index: 20;">
                <h6 class="card-header">
                    Filter
                </h6>
                <div class="card-body">
                    <!-- <div class="form-group btn-group btn-group-sm d-flex" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-outline-primary small"><i class="mi mi-Layout mi-fw"></i></button>
                        <button type="button" class="btn btn-outline-primary small"><i class="mi mi-Puzzle mi-fw"></i></button>
                        <button type="button" class="btn btn-outline-primary small"><i class="mi mi-ResolutionLegacy mi-fw"></i></button>
                        <button type="button" class="btn btn-outline-primary small">...</button>
                    </div> -->
                    <div class="form-group input-group input-group-sm flex-nowrap">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="addon-wrapping"><i class="fas fa-search"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="Search keywords..." aria-label="Username"
                            aria-describedby="addon-wrapping">
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Sort by</label>
                        <select class="custom-select custom-select-sm">
                            <option selected>Select sort by:</option>
                            <option value="1">Newest</option>
                            <option value="2">Most popular</option>
                            <option value="3">Most installed</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Categories</label>
                        <select class="custom-select custom-select-sm">
                            <option selected>Select category:</option>
                            <option value="1">All</option>
                            <option value="2">Blog</option>
                            <option value="3">Website</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Price</label>
                        <input type="range" class="custom-range" id="customRange1">
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Rating</label>
                        <input type="range" class="custom-range" id="customRange1">
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>